<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta name="renderer" content="webkit" />
		<title></title>
		<!-- element 自定义 css -->
		<link rel="stylesheet" href="../css/element.css" />
		<!-- public 自定义 css -->
		<link rel="stylesheet" href="../css/public.css" />




		<!-- 头部css -->
		<link rel="stylesheet" href="../common/css/header.css" />

		<!-- 表单css -->
		<link rel="stylesheet" href="../css/table.css" />

		<!-- 本页面的css -->
		<link rel="stylesheet" href="css/index.css" />





	</head>

	<body>
		<!-- 头部嵌入 -->
		<script type="text/javascript" src="../common/header.js"></script>
		<!-- 导航 嵌入 -->
		<script type="text/javascript" src="../common/nav.js"></script>
		<div class="safeGroupList-wrapper table-wrapper section" v-cloak>
			<div class="orderList-content-wrapper table-content-wrapper">
				<div class="serverListNav">
					<span class="nav-item">总览</span>
					<span class="nav-item">费用中心</span>
					<span class="nav-item">订单管理</span>
				</div>
				<div class="form-wrapper">
					<span class="from-title">
						<i @click="gotoReturnlastPage" class="icon el-icon-back"></i>安全组</span>
					<div class="button-wrapper  fboxRow">
						<div class="button-wrapper-left fboxRow">
							<div @click="handleClickSafeGroup" class="yzButton newServer active">创建</div>
						</div>
						<el-input class="mr-20" maxlength="50" @keyup.enter.native="searchSafegroupBykeyword" class="button-wrapper-right"
						 style="width: 220px" placeholder="请输入搜索内容" v-model="searchkeywords">
							<i @click="searchSafegroupBykeyword" slot="suffix" class="el-input__icon el-icon-search"></i>
						</el-input>
					</div>

					<el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" @sort-change="changeCreateTimeSort">



						<el-table-column label="安全组名称" width="auto">
							<template slot-scope="scope">
								<span class="nowrapShowpointer"> {{scope.row.name}}</span>
							</template>

						</el-table-column>


						<el-table-column label="描述" width="auto">
							<template slot-scope="scope">
								<span class="nowrapShowpointer">{{scope.row.desc}}</span>
							</template>
						</el-table-column>

						<el-table-column label="关联实例" width="auto">
							<template slot-scope="scope">
								{{scope.row.relevance}}个
							</template>
						</el-table-column>

						<el-table-column label="安全组规则数量" width="auto">
							<template slot-scope="scope">
								{{scope.row.rulerNum}}个
							</template>
						</el-table-column>

						<el-table-column sortable="custom" width="auto" label="创建时间">
							<template slot-scope="scope">
								{{scope.row.createTime}}
							</template>
						</el-table-column>






						<el-table-column width="400" label="操作">
							<template slot-scope="scope">
								<div class="opeartionButton-wrapper fboxRow">
									<span class="opeartionButton" @click="handleClickRelevanceCloud(scope.row)" class="opearButton">关联云主机</span>
									<span class="opeartionButton" @click="handleClickConfigRuler(scope.row)" class="opearButton">配置规则</span>
									<span class="opeartionButton" @click="handleClickManageExample(scope.row)" class="opearButton">管理实例</span>
									<el-select  value="更多">
										<el-option 
										 @click.native="handleClickJiebangCloud(scope.row)"
										label="解绑云主机">
										</el-option>
										<el-option 
										@click.native="handleClickRemoveSafeGroup(scope.row)"
										label="删除">
										</el-option>
										<el-option
										@click.native="handleClickEditSafeGroup(scope.row)"
										label="编辑">
										</el-option>
									</el-select>
								
								</div>

							</template>
						</el-table-column>


					</el-table>
					<div class="pagination-wrapper">
						<div class="total-wrapper">
							<span class="totalSize">共有 {{pageInfo.totalSize}} 条记录</span>
							<el-select @change="handleSizeChange" v-model="pageInfo.pagesize">
								<el-option v-for="item in pageOptions" :key="item.value" :label="item.label" :value="item.value">
								</el-option>
							</el-select>
						</div>
						<el-pagination :page-size="pageInfo.pagesize" @size-change="handleSizeChange" @current-change="handleCurrentChange"
						 :current-page="pageInfo.currentPage" layout="prev, pager, next, jumper" :total="pageInfo.totalSize">
						</el-pagination>
					</div>
				</div>
			</div>


			<el-dialog @closed="closedcreateSafeGroupDialog" style="box-sizing: border-box;" width="640px" class="yz-el-dialog"
			 :visible.sync="createSafeGroupDialogVisble">
				<div slot="title" class="dialog-title">
					创建安全组
				</div>
				<div class="dialog-content">
					<div class="dialog-content-infowrapper fboxCol mb-20">
						<el-form :model="createSafeGroupForm" ref="createSafeGroupForm" :rules="createSafeGrouprules" label-width="120px">
							<el-form-item prop="name" label="安全组名称:">
								<el-input maxlength="50" style="width: 320px;" type="text" class="card-box-input" placeholder="请输入安全组自定义名称" v-model="createSafeGroupForm.name">

								</el-input>
							</el-form-item>
							<el-form-item prop="desc" label="安全组描述:">
								<el-input style="width: 320px;" type="textarea" placeholder="请输入内容" v-model="createSafeGroupForm.desc"
								 :autosize="{ minRows: 4, maxRows: 4}" maxlength="50" show-word-limit>
								</el-input>
							</el-form-item>


						</el-form>

						<div v-if="hiddenRuler" class="lookRuler" @click="hiddenRuler = false">
							查看默认规则<i class="icon el-icon-arrow-down"></i>
						</div>
						<div v-if="!hiddenRuler" class="lookRuler" @click="hiddenRuler = true">
							隐藏默认规则<i class="icon el-icon-arrow-up"></i>
						</div>

						<div class="ruler-wrapper" v-if="!hiddenRuler">
							<div class="yz-tab-wrapper">
								<div :class="{'active': inOutTabIndex === 0}" @click="inOutTabIndex = 0" class="yz-tab-item">入方向</div>
								<div :class="{'active': inOutTabIndex === 1}" @click="inOutTabIndex = 1" class="yz-tab-item">出方向</div>
							</div>

							<el-table ref="outinTable" :data="inOutTabIndex === 0 ? intableData : outtableData" tooltip-effect="dark">
								<el-table-column label="授权对象" width="auto">
									<template slot-scope="scope">
										{{scope.row.objectName}}
									</template>

								</el-table-column>


								<el-table-column label="协议类型" width="auto">
									<template slot-scope="scope">
										{{scope.row.protocolType}}
									</template>
								</el-table-column>

								<el-table-column label="端口范围" width="auto">
									<template slot-scope="scope">
										{{scope.row.portRange}}
									</template>
								</el-table-column>

							</el-table>
						</div>

					</div>


					<div class="dialog-button-wrapper fboxRow">
						<div @click="confirmCreateSafeGroup" class="yzButton  confirm">保存</div>
						<div @click="createSafeGroupDialogVisble = false" class="yzButton cancelButton">取消</div>
					</div>
				</div>
			</el-dialog>
			
			
			
			<el-dialog   @closed="closedrelevanceCloudDialog" style="box-sizing: border-box;" width="640px" class="yz-el-dialog"
			 :visible.sync="relevanceCloudDialogVisble">
				<div slot="title" class="dialog-title">
					关联云主机
				</div>
				<div class="dialog-content">
					<!-- 这里不能使用v-model -->
					<el-form  :rules="relevanceCloudrules" :model="relevanceCloudForm"  ref="relevanceCloudForm" label-width="120px">
						<el-form-item prop="selectRelevanceCloud" label="选择云主机:">
							<el-select
							    v-model="relevanceCloudForm.selectRelevanceCloud"
							    multiple
							    collapse-tags
							    placeholder="请选择">
							    <el-option
							      v-for="item in relevanceCloudGroup"
							      :key="item.id"
							      :label="item.label"
							      :value="item.id">
							    </el-option>
							  </el-select>
						</el-form-item>
					</el-form>
			
			
					<div class="dialog-button-wrapper fboxRow">
						<div @click="confirmRelevanceCloud" class="yzButton  confirm">保存</div>
						<div @click="relevanceCloudDialogVisble = false" class="yzButton cancelButton">取消</div>
					</div>
				</div>
			</el-dialog>
			
			
			<el-dialog   @closed="closedJiebangCloudDialog" style="box-sizing: border-box;" width="640px" class="yz-el-dialog"
			 :visible.sync="JiebangCloudDialogVisble">
				<div slot="title" class="dialog-title">
					解绑云主机
				</div>
				<div class="dialog-content">
					<!-- 这里不能使用v-model -->
					<el-form class="JiebangCloudForm" :rules="JiebangCloudFormrules" :model="JiebangCloudForm"  ref="JiebangCloudForm" label-width="120px">
						<el-form-item  class="fboxCol" prop="jiebangcloudGroup" label="选择云主机:">
							<div class="checkbox-wrapper w100  fboxRow">
								<el-row style="width: 100%;">
									<el-col v-for="(item,index) in JiebangCloudForm.jiebangcloudGroup" :key="index" :span="6">
										<div  class="checkbox-item">
											<el-checkbox v-model="item.checked">{{item.label}}</el-checkbox>
										</div>
									</el-col>
								</el-row>

								
							</div>
						</el-form-item>
					</el-form>
			
			
					<div class="dialog-button-wrapper fboxRow">
						<div @click="confirmJiebangCloud" class="yzButton  confirm">确认</div>
						<div @click="JiebangCloudDialogVisble = false" class="yzButton cancelButton">取消</div>
					</div>
				</div>
			</el-dialog>
			
			
			<el-dialog  @closed="closeRemoveSafeGroupDialog" style="box-sizing: border-box;" width="640px" class="yz-el-dialog"
			 :visible.sync="removeSafeGroupDialogVisble">
				<div slot="title" class="dialog-title">
					删除安全组
				</div>
				<div class="dialog-content">
					<div class="dialog-content-infowrapper fboxRow mb-20">
						<img class="mr-20 flagImg" src="../img/warning-orange02.png"/>
						<p class="fboxCenter" style="line-height: 25px;">
							您有多台云主机已绑定该安全组，删除该安全组也将改变您以下主机访问规则，请您慎重，是否取消
						</p>

					</div>
					<el-table  :data="[activeSafeGroup]"  style="width: 100%;margin-top: 10px;margin-bottom: 50px;">
						<el-table-column prop="name" label="安全组名称" width="auto">
						</el-table-column>
						<el-table-column prop="desc" label="描述" width="auto">
							<template slot-scope="scope">
								<span>
									{{scope.row.desc}}
								</span>
							</template>
						</el-table-column>
					</el-table>
			
					<div class="dialog-button-wrapper fboxRow">
						<div @click="confirmRemoveSafeGroup" class="yzButton  confirm">确认</div>
						<div @click="removeSafeGroupDialogVisble = false" class="yzButton cancelButton">取消</div>
					</div>
				</div>
			</el-dialog>
			
			<el-dialog   @closed="editJiebangCloudDialog" style="box-sizing: border-box;" width="640px" class="yz-el-dialog"
			 :visible.sync="editSafeGroupDialogVisble">
				<div slot="title" class="dialog-title">
					编辑安全组
				</div>
				<div class="dialog-content">
					<!-- 这里不能使用v-model -->
					<el-form  style="margin-bottom: 50px;" :rules="createSafeGrouprules" :model="activeSafeGroup"  ref="editSafeGroupForm" label-width="120px">
						<el-form-item prop="name" label="安全组名称:">
							<el-input maxlength="50" style="width: 320px;" type="text" class="card-box-input" placeholder="请输入安全组自定义名称" v-model="activeSafeGroup.name">
						
							</el-input>
						</el-form-item>
						<el-form-item prop="desc" label="安全组描述:">
							<el-input style="width: 320px;" type="textarea" placeholder="请输入内容" v-model="activeSafeGroup.desc"
							 :autosize="{ minRows: 4, maxRows: 4}" maxlength="50" show-word-limit>
							</el-input>
						</el-form-item>
					</el-form>
			
			
					<div class="dialog-button-wrapper fboxRow">
						<div @click="confirmEditSafeGroup" class="yzButton  confirm">确认</div>
						<div @click="editSafeGroupDialogVisble = false" class="yzButton cancelButton">取消</div>
					</div>
				</div>
			</el-dialog>
			
			
			
			
		</div>

		<script type="application/javascript" src="../js/util.js"></script>
		<!-- vue  -->
		<script>
			let vmServerList = new Vue({

				el: '.safeGroupList-wrapper',
				data: function() {
					return {
						searchkeywords: undefined, //  搜索关键字
						// 表格数据
						tableData: [{
							id: '123121',
							name: '第一安全组', // 安全组名称
							desc: '系统安全组', // 安全组描述
							relevance: 2, // 安全组关联实例
							rulerNum: 3, // 安全组规则数量
							createTime: '2020-11-25 11:24:46' // 创建时间
						}, {
							id: '273818',
							name: '第一安全组2', // 安全组名称
							desc: '系统安全组', // 安全组描述
							relevance: 2, // 安全组关联实例
							rulerNum: 3, // 安全组规则数量
							createTime: '2020-11-25 11:24:46' // 创建时间
						}, {
							id: '29102',
							name: '第一安全组3', // 安全组名称
							desc: '系统安全组', // 安全组描述
							relevance: 2, // 安全组关联实例
							rulerNum: 3, // 安全组规则数量
							createTime: '2020-11-25 11:24:46' // 创建时间
						}, {
							id: '9283281',
							name: '第一安全组4', // 安全组名称
							desc: '系统安全组', // 安全组描述
							relevance: 2, // 安全组关联实例
							rulerNum: 3, // 安全组规则数量
							createTime: '2020-11-25 11:24:46' // 创建时间
						}, {
							id: '929239',
							name: '第一安全组', // 安全组名称
							desc: '系统安全组', // 安全组描述
							relevance: 2, // 安全组关联实例
							rulerNum: 3, // 安全组规则数量
							createTime: '2020-11-25 11:24:46' // 创建时间
						}],
						createSafeGroupDialogVisble: false, // 创建安全组的dialog
						relevanceCloudDialogVisble: false, // 关联云主机的dialog
						removeSafeGroupDialogVisble: false, // 删除安全组的dialog
						JiebangCloudDialogVisble:false,// 解绑云主机的dialog
						editSafeGroupDialogVisble: false, // 编辑安全组的dailog
						createSafeGroupForm: { // 创建安全组的表单
							name: undefined,
							desc: undefined
						},
						inOutTabIndex: 0, // 安全组的出入方向  0是入方向 1是出方向
						intableData: [{ // 入方向表格数据
							id: '29391',
							objectName: '授权IP', // 授权对象
							protocolType: 'http', // 协议类型
							portRange: 20 // 端口范围
						}, {
							id: '2333',
							objectName: '授权IP', // 授权对象
							protocolType: 'http', // 协议类型
							portRange: 20 // 端口范围
						}, {
							id: '55466',
							objectName: '授权IP', // 授权对象
							protocolType: 'http', // 协议类型
							portRange: 20 // 端口范围
						}, {
							id: '2434343',
							objectName: '授权IP', // 授权对象
							protocolType: 'http', // 协议类型
							portRange: 20 // 端口范围
						}, {
							id: '45656',
							objectName: '授权IP', // 授权对象
							protocolType: 'http', // 协议类型
							portRange: 20 // 端口范围
						}, {
							id: '982993',
							objectName: '授权IP', // 授权对象
							protocolType: 'http', // 协议类型
							portRange: 20 // 端口范围
						}, {
							id: '24344',
							objectName: '授权IP', // 授权对象
							protocolType: 'http', // 协议类型
							portRange: 20 // 端口范围
						}, {
							id: '23133',
							objectName: '授权IP', // 授权对象
							protocolType: 'http', // 协议类型
							portRange: 20 // 端口范围
						}],
						outtableData: [{ // 出方向表格数据
							id: '29391',
							objectName: '授权IP出', // 授权对象
							protocolType: 'http', // 协议类型
							portRange: 20 // 端口范围
						}, {
							id: '2333',
							objectName: '授权IP出IP', // 授权对象
							protocolType: 'http', // 协议类型
							portRange: 20 // 端口范围
						}, {
							id: '55466',
							objectName: '授权IP出IP', // 授权对象
							protocolType: 'http', // 协议类型
							portRange: 20 // 端口范围
						}, {
							id: '2434343',
							objectName: '授权IP出IP', // 授权对象
							protocolType: 'http', // 协议类型
							portRange: 20 // 端口范围
						}, {
							id: '45656',
							objectName: '授权IP出IP', // 授权对象
							protocolType: 'http', // 协议类型
							portRange: 20 // 端口范围
						}, {
							id: '982993',
							objectName: '授权IP出IP', // 授权对象
							protocolType: 'http', // 协议类型
							portRange: 20 // 端口范围
						}, {
							id: '24344',
							objectName: '授权IP出', // 授权对象
							protocolType: 'http', // 协议类型
							portRange: 20 // 端口范围
						}, {
							id: '23133',
							objectName: '授权IP出', // 授权对象
							protocolType: 'http', // 协议类型
							portRange: 20 // 端口范围
						}],
						createSafeGrouprules: {
							name: [{
								required: true,
								message: '请输入安全组名称',
								trigger: 'blur'
							}, ],
							desc: [{
								required: true,
								message: '请输入安全组描述',
								trigger: 'blur'
							}],
						},
						relevanceCloudForm: {
							selectRelevanceCloud:[], // 选择关联的云主机  这里可以多选  所以是个数组
						},
						JiebangCloudForm: {  // 解绑云主机表单
							jiebangcloudGroup:[] ,// 解绑云主机数组
						},
						
						relevanceCloudrules: {  // 关联云主机  表单验证规则
							selectRelevanceCloud:[{
								required: true,
								message: '请选择关联的云主机',
								trigger: 'blur'
							}],
						},
						JiebangCloudFormrules:{  // 解绑云主机  表单验证规则
							jiebangcloudGroup:[{
								required: true,
								message: '请选择解绑云主机',
								trigger: 'blur'
							}]
						},
						activeSafeGroup:{},// 被选中的安全组
						
						
						
						
						






						isFirstShowOrderType: true, // 是否是第一次展示工单类型
						selectOrderType: 'allOrder', // 选中订单类型  默认为全选
						orderTypeGroup: [{
								label: '全部',
								value: 'allOrder'
							},
							{
								label: '已支付',
								value: 'alredyPay'
							}, {
								label: '未支付',
								value: 'noPay'
							}, {
								label: '已取消',
								value: 'alreadyCancel'
							}
						],
						orderTimeRange: undefined, // 订单选择时间


						// 分页信息
						pageInfo: {
							pagesize: 8,
							currentPage: 1,
							totalSize: 41
						},
						pageOptions: [{
							value: 6,
							label: '6条/页'
						}, {
							value: 8,
							label: '8条/页'
						}, {
							value: 10,
							label: '10条/页'
						}],
						cancelDialogVisble: false, // 取消订单弹框
						activeOrder: undefined, // 选中的订单
						hiddenRuler: true, // 是否隐藏默认规则  默认为不展示
						relevanceCloudGroup:[] ,// 关联云主机数组
						
					}
				},

				methods: {
					
					
					
					// 点击返回按钮
					gotoReturnlastPage: function() {
						console.log('点击标题返回按钮')
					},
					// 创建安全组的方法
					handleClickSafeGroup: _throttle(function() {
						this.createSafeGroupDialogVisble = true
					}),
					// 通过关键字 搜索安全组
					searchSafegroupBykeyword: function() {
						if (this.searchkeywords === '' || this.searchkeywords === undefined) {
							return
						}
						console.log('获取安全组数据', this.searchkeywords)
					},
					// 改变创建时间排序
					changeCreateTimeSort: function(e) {
						console.log(e.order)
						if (e.order === 'descending') {
							console.log('降序排列')
						} else if (e.order === 'ascending') {
							console.log('升序排列')
						}
					},

					// 确认创建安全组
					confirmCreateSafeGroup: _throttle(function() {
						let that = this
						this.$refs['createSafeGroupForm'].validate(function(valid) {
							if (valid) {
								console.log('确认创建安全组')
								that.createSafeGroupDialogVisble = false
							} else {
								return false;
							}
						})
					}),
					// 关闭创建安全组dialog
					closedcreateSafeGroupDialog: function() {
						// 初始化
						this.inOutTabIndex = 0
						this.hiddenRuler = true
						this.createSafeGroupForm.name = undefined
						this.createSafeGroupForm.desc =  undefined
						
						// 重置表单状态
						this.$refs['createSafeGroupForm'].resetFields()
						
					},
					// 点击关联云主机
					handleClickRelevanceCloud: _throttle(function(row) {
						console.log(row)
						// 这里写的是  测试数据   实际上由后台返回
						this.relevanceCloudGroup = [
							{
							  id: '1',
							  label: '云主机一'
							}, {
							  id: '2',
							  label: '云主机二'
							}, {
							  id: '3',
							  label: '云主机三'
							}, {
							  id: '4',
							  label: '云主机四'
							}, {
							  id: '5',
							  label: '云主机五'
							}
						]
						
						
						this.relevanceCloudDialogVisble =  true
					}),

					//  确认关联云主机
					confirmRelevanceCloud: _throttle(function() {
						let that = this
						this.$refs['relevanceCloudForm'].validate(function(valid) {
							if (valid) {
								console.log('确认关联云主机')
								that.relevanceCloudDialogVisble = false
							} else {
								return false;
							}
						})
					}),
					// 关闭关联云主机dialog
					closedrelevanceCloudDialog: function() {
						// 关联云主机 的id集合
						console.log(this.relevanceCloudForm.selectRelevanceCloud)
						// 初始化
						this.relevanceCloudForm.selectRelevanceCloud = []
						this.relevanceCloudGroup = []
						// 重置表单状态
						this.$refs['relevanceCloudForm'].resetFields()
						
					},
					// 点击配置规则按钮
					handleClickConfigRuler:_throttle(function(row) {
						console.log(row)
						console.log('点击配置规则按钮')
					}),
					// 点击管理实例
					handleClickManageExample:_throttle(function(row) {
							console.log('点击管理实例')
					}),
					// 关闭解绑云主机  dialog
					closedJiebangCloudDialog: function() {
						console.log('关闭解绑云主机  dialog')
						// 初始化
						this.JiebangCloudForm.jiebangcloudGroup = []
						// 重置表单状态
						this.$refs['JiebangCloudForm'].resetFields();
					},
					
					// 点击解绑云主机
					handleClickJiebangCloud: _throttle(function() {
						// 解绑云主机的数组
						this.JiebangCloudForm.jiebangcloudGroup = [{
							  id: '1',
							  label: '解绑云主机一',
							  checked: false
							}, {
							  id: '2',
							  label: '解绑云主机二',
							  checked: false
							}, {
							  id: '3',
							  label: '解绑云主机三',
							  checked: false
							}, {
							  id: '4',
							  label: '解绑云主机四',
							  checked: false
							}, {
							  id: '5',
							  label: '解绑云主机五',
							  checked: false
							}]
						
						this.JiebangCloudDialogVisble = true
					}),
					// 点击确认解绑云主机
					confirmJiebangCloud:_throttle(function() {
						let selectjiebangGroup = this.JiebangCloudForm.jiebangcloudGroup.filter(function(item) {
							return  item.checked
						})
						
						if(selectjiebangGroup.length === 0) {
							this.$message.error('请选择解绑云主机再提交')
							return
						}
						console.log(selectjiebangGroup)
						this.JiebangCloudDialogVisble = false
						
					}),
					//  点击删除安全组
					handleClickRemoveSafeGroup:_throttle(function(row) {
						this.activeSafeGroup = deepCopy(row)
						this.removeSafeGroupDialogVisble = true
					}),
					//  确认删除安全组
					confirmRemoveSafeGroup:_throttle(function() {
						// 现在选中的
						console.log(this.activeSafeGroup)
						console.log('确认删除安全组')
						this.removeSafeGroupDialogVisble =  false
					}),
					
					// 删除安全组dialog的关闭 事件
					closeRemoveSafeGroupDialog: function() {
						this.activeSafeGroup = {}
					},
					
					// 编辑安全组dialog的关闭事件
					editJiebangCloudDialog: function() {
						this.activeSafeGroup = {}
						// 重置表单状态
						this.$refs['editSafeGroupForm'].resetFields()
					},
					
					// 确认编辑安全组
					confirmEditSafeGroup:_throttle(function() {
						// 现在选中的
						console.log(this.activeSafeGroup)
						console.log('确认编辑安全组')
						this.editSafeGroupDialogVisble = false
					}),
					// 点击编辑安全组
					handleClickEditSafeGroup:_throttle(function(row) {
						console.log('点击编辑安全组')
						this.activeSafeGroup = deepCopy(row)
						this.editSafeGroupDialogVisble = true
					}),

					handleSizeChange: function(e) {
						console.log(e)
					},
					handleCurrentChange: function(val) {
						console.log('当前页为xxxxx')
					},
				},
				mounted: function() {
				
				}

			})
		</script>
	</body>
</html>
